<template>
	<view class="work-container">
		<view class="rljs-box">
			<view class="rljs-img" v-if="form.radioType == '6'">
				<upload @urlArr="bkAddImg"></upload>
			</view>
			<view class="rljs-list">
				<uni-forms ref="valiForm" :rules="rules" :modelValue="form" label-width="250rpx">
					<uni-forms-item :label="$t('control:surveillanceDevice')" required name="devicesTree">
						<view @click="handleDevicesOpen" class="sbBox">
							{{ nodeListCopy }}
						</view>
					</uni-forms-item>
					<uni-forms-item :label="$t('control:surveillanceName')" required name="monitorName">
						<uni-easyinput v-model="form.monitorName" @focus="hideTabbar" @blur="showTabbar"
							:placeholder="$t('control:pleaseEnter')" />
					</uni-forms-item>
					<uni-forms-item :label="$t('control:surveillanceTimeType')" required name="monitorTimeType">
						<uni-data-picker :placeholder="$t('search:pleaseSelect')" :localdata="[
							{ text: this.$t('warn:permanent'), value: 0 },
							{ text: this.$t('search:oneDay'), value: 1 },
							{ text: this.$t('search:threeDays'), value: 3 },
							{ text: this.$t('search:oneWeek'), value: 7 },
							{ text: this.$t('search:oneMonth'), value: 30 },
							{ text: this.$t('search:custom'), value: 19 }
						]" v-model="form.monitorTimeType" @change='changeMonitorTime'>
						</uni-data-picker>
					</uni-forms-item>
					<uni-forms-item :label="$t('control:surveillanceEndTime')" required name="monitorTimeE">
						<uni-datetime-picker type="datetime" return-type="timestamp" v-model="form.monitorTimeE"
							:disabled="form.monitorTimeType !== 19" />
					</uni-forms-item>
					<uni-forms-item :label="$t('control:type')" required name="radioType">
						<uni-data-checkbox v-model="form.radioType" :localdata="[
							{ text: this.$t('control:librarySurveillance'), value: '-1' },
							{ text: this.$t('control:imageSurveillance'), value: '6' }
						]">
						</uni-data-checkbox>
					</uni-forms-item>
					<uni-forms-item :label="$t('control:surveillanceType')" required name="monitorType"
						v-if="form.radioType == '-1'">
						<uni-data-picker :placeholder="$t('search:pleaseSelect')" :localdata="[
							{ text: this.$t('control:blacklist'), value: 1 },
							{ text: this.$t('control:stranger'), value: 2 }
						]" v-model="form.monitorType">
						</uni-data-picker>
					</uni-forms-item>
					<uni-forms-item :label="$t('search:faceLibrary')" required name="groupIds"
						v-if="form.radioType == '-1'">
						<uni-data-picker :placeholder="$t('search:pleaseSelect')"
							:popup-title="$t('search:pleaseSelect')" :localdata="dataTree" v-model="form.groupIds"
							:map="treeChild">
						</uni-data-picker>
					</uni-forms-item>
					<uni-forms-item :label="$t('control:surveillanceStatus')" required name="monitorStatus">
						<uni-data-picker :placeholder="$t('search:pleaseSelect')" :localdata="[
							{ text: this.$t('control:enable'), value: 1 },
							{ text: this.$t('control:disable'), value: 2 }
						]" v-model="form.monitorStatus">
						</uni-data-picker>
					</uni-forms-item>
					<uni-forms-item :label="$t('control:alarmLevel')" required name="monitorLevelId">
						<uni-data-picker :placeholder="$t('search:pleaseSelect')" :localdata="alarmLevelList"
							v-model="form.monitorLevelId" :map="treeLevel">
						</uni-data-picker>
					</uni-forms-item>
					<uni-forms-item :label="$t('control:responder')" required name="userList">
						<view style="min-height: 72rpx;line-height: 72rpx;padding: 0 10rpx 0 20rpx;"
							@click='handlePoliceOpen'>{{ policeName }}</view>
					</uni-forms-item>
					<uni-forms-item :label="$t('control:surveillanceThresholdPercent')" required name="alarmThreshold">
						<uni-easyinput type="number" min='0' max='100' v-model="form.alarmThreshold"
							:placeholder="$t('search:enterThreshold')" />
					</uni-forms-item>
					<uni-forms-item :label="$t('warn:remark')" name="remark" style="border: none;">
						<uni-easyinput v-model="form.remark" @focus="hideTabbar" @blur="showTabbar"
							style="margin-top:6rpx;" type="textarea" :placeholder="$t('control:pleaseEnter')" />
					</uni-forms-item>
				</uni-forms>
			</view>
			<view class="btn">
				<button type="primary" v-if="tabbar" @click="Add('valiForm')">{{ $t('control:submit') }}</button>
			</view>
		</view>

		<view class="zhezhao" v-if="showDialog"></view>
		<devicesTree ref='devicesTree' @onOk="setDevides" />
		<policeTree ref='policeTree' @onOk="setPolice" />
	</view>
</template>

<script>
import { FaceAdd, FaceImgAdd, } from '@/api/listAdd.js'
import { getAlarmLevel } from '@/api/warning/index.js'
import { DBFace2, structureRecognize } from "@/api/rljc.js"
import upload from "@/components/upload/index.vue"
import LyTree from '@/components/ly-tree/ly-tree.vue'
import devicesTree from '@/components/devicesTree/devicesTree.vue'
import policeTree from '@/components/policeTree/policeTree.vue'

export default {
	components: {
		upload,
		LyTree,
		devicesTree,
		policeTree
	},
	data() {
		return {
			tabbar: true,
			// 处警人开始
			orgList: [],
			showDialog: false,
			data: [],
			defaultProps: {
				children: 'children',
				label: 'label',
			},
			expandOnCheckNode: false, // 是否展开选中的节点
			// 处警人结束

			index: 1,
			// type: 1,
			form: {
				alarmThreshold: 90, //阈值
				faces: [], //图片提交
				groupIds: [], //人像库
				monitorLevelId: 3, //报警等级
				monitorName: "", //布控名称
				// monitorTimeB: "", //周期开始时间
				monitorTimeE: "", //周期结束时间
				monitorTimeType: 19, //布控周期 0永久，19,非永久
				devicesTree: [], //设备
				userList: [], //处警人
				remark: "",
				radioType: '-1',
				monitorType: 1,
				monitorStatus: 1
			},
			nodeListCopy: this.$t('search:pleaseSelect'),
			policeName: this.$t('search:pleaseSelect'), //处警人名称
			policeNameCopy: "",
			policemanList: [], //处警人

			// 报警等级list
			alarmLevelList: [],
			treeLevel: {
				text: "name",
				value: "monitorLevelId",
			},

			//人像库
			dataTree: [],
			treeChild: {
				text: "name",
				value: "id",
			},
			// 校验规则
			rules: {
				devicesTree: {
					rules: [{
						required: true,
						errorMessage: this.$t('control:deviceRequired')
					}]
				},
				groupIds: {
					rules: [{
						required: true,
						errorMessage: this.$t('control:faceLibraryRequired')
					}]
				},
				monitorName: {
					rules: [{
						required: true,
						errorMessage: this.$t('control:surveillanceNameRequired')
					}]
				},
				monitorType: {
					rules: [{
						required: true,
						errorMessage: this.$t('control:surveillanceTypeRequired')
					}]
				},
				level: {
					rules: [{
						required: true,
						errorMessage: this.$t('control:alarmLevelRequired')
					}]
				},
				userList: {
					rules: [{
						required: true,
						errorMessage: this.$t('control:responderRequired')
					}]
				},
				monitorStatus: {
					rules: [{
						required: true,
						errorMessage: this.$t('control:surveillanceStatusRequired')
					}]
				}
			},
		}
	},
	onLoad() {
		uni.getSystemInfo({
			success: (res) => {
				this.windowHeight = res.windowHeight;
			}
		});
		uni.onWindowResize((res) => {
			if (res.size.windowHeight < this.windowHeight) {
				this.tabbar = false
			} else {
				this.tabbar = true
			}
		})
	},
	onShow() {
		var userName = localStorage.getItem("userName")
		var userId = localStorage.getItem("userId")
		this.policeName = userName
		this.form.userList = [userId]
		this.levelT()
		this.faceDB()
	},
	methods: {
		showTabbar() {
			this.tabbar = true;
		},
		hideTabbar() {
			this.tabbar = false;
		},
		levelT() {
			getAlarmLevel({
				currentPage: 1,
				pageSize: 9999
			}).then(res => {
				this.alarmLevelList = res.data.datas
			})
		},
		// 人像库下拉框
		faceDB() {
			DBFace2({
				isDelete: 1
			}).then(res => {
				this.dataTree = res.data
			})
		},
		bkAddImg(e) {
			structureRecognize({
				'img': e,
				'outputType': 'face',
				'isVideo': 0,
				'isGetAttr': 0,
				'isGetFeature': 0,
				'isGetPassengerAttr': 0,
				'imgType': 3
			}).then(res => {
				if (res?.code === '00000000') {
					const list = res?.data?.face || [],
						res_list = list?.map(({
							objPic
						}) => (
							`data:image/jpeg;base64,${objPic}`
						))
					if (res_list.length === 0) {
						this.$message.warning(this.$t('search:featureNotExtracted'))
						return
					}
					this.form.faces = res_list
				}
			})
			// 需要转换成base64
			// this.form.faces = [e]
		},
		Add(ref) {
			this.$refs[ref].validate().then(response => {
				const {
					groupIds,
					devicesTree,
					radioType,
					monitorType,
					alarmThreshold,
					faces,
					...rest
				} = this.form,
					params = {
						...rest
					}
				params.devicesTree = {
					select: {
						deviceIds: devicesTree
					}
				}
				params.monitorType = radioType === '6' ? 6 : monitorType
				params.alarmThreshold = Number(Number(alarmThreshold) / 100)
				params.radioType = radioType === '-1' ? radioType : void 0
				if (radioType === '6') {
					params.faceType = 2
					params.faces = faces
					FaceImgAdd(params).then(res => {
						if (res.code == '00000000') {
							uni.showToast({
								title: this.$t('control:submitSuccess'),
								duration: 500
							});
							uni.reLaunch({
								url: '/pages/control/list'
							})
						}
					})
				} else {
					params.groupIds = [groupIds]
					FaceAdd(params).then(res => {
						if (res.code == '00000000') {
							uni.showToast({
								title: this.$t('control:submitSuccess'),
								duration: 500
							});
							uni.reLaunch({
								url: '/pages/control/list'
							})
						}
					})
				}
			}).catch(err => {
				console.log('err', err);
			})
		},
		handleDevicesOpen() {
			this.$refs.devicesTree.open()
		},
		setDevides(id, labels) {
			this.form.devicesTree = id
			this.nodeListCopy = labels || this.$t('search:pleaseSelect')
		},
		handlePoliceOpen() {
			this.$refs.policeTree.open()
		},
		setPolice(id, labels) {
			this.form.userList = id
			this.policeName = labels
		},
		changeMonitorTime({
			detail: {
				value
			}
		}) {
			const monitorTimeType = value[0].value
			if (monitorTimeType == 0) {
				this.form.monitorTimeE = new Date('2999-12-31 23:59:59').getTime()
			} else if (monitorTimeType != 19) {
				const timestamp = new Date().getTime()
				this.form.monitorTimeE = timestamp + monitorTimeType * 24 * 60 * 60 * 1000
			}
		}
	},
}
</script>

<style scoped>
page {
	background-color: #fff;
}

.rljs-nav {
	position: fixed;
	top: 80rpx;
	width: 750rpx;
	height: 80rpx;
	background-color: #f1f1f1;
	display: flex;
	justify-content: space-evenly;
	z-index: 50;
}

.rljs-title {
	line-height: 80rpx;
}

.active {
	line-height: 80rpx;
	color: #0081ff;
	border-bottom: 2px solid #0081ff;
}

.rljs-img {
	padding: 40rpx 0;
}

.rljs-img>>>.file-picker__box {
	position: relative;
	width: 40%;
	height: 0;
	margin: auto;
	padding-top: 40%;
	box-sizing: border-box;
}

.rljs-list {
	padding: 0rpx 60rpx;
}

.rljs-list .uni-forms-item {
	border-bottom: 1px solid #dedede;
	margin-bottom: 0rpx;
	padding: 15rpx 0;
}

.rljs-list>>>.uni-input-input {
	color: #333;
}

.rljs-list>>>.input-value-border {
	border: none;
}

.rljs-list>>>.uni-text {
	display: none;
}

.rljs-list>>>.placeholder {
	font-size: 28rpx;
}

.rljs-list>>>.uni-date-x--border {
	border: none;
}

.rljs-list>>>.uni-icons {
	display: none;
}

.rljs-list>>>.uni-date .uni-icons {
	display: block;
}

.rljs-list>>>.is-input-border {
	border: none;
}

.rljs-list>>>.uni-easyinput__placeholder-class {
	font-size: 28rpx;
}

.rljs-list>>>.uni-date__x-input {
	padding: 0;
}

.rljs-list>>>.uni-data-checklist .checklist-group {
	margin-top: 10rpx;
}

.btn {
	position: fixed;
	bottom: 0;
	width: 750rpx;
	background-color: #fff;
}

.btn button {
	margin: 0rpx 50rpx 50rpx 50rpx;
	font-size: 30rpx;
}

.rljs-box {
	width: 750rpx;
	margin-top: 80rpx;
	padding-bottom: 200rpx;
}

.rljs-box {
	width: 750rpx;
	margin-top: 80rpx;
	padding-bottom: 200rpx;
}

.rljs-img>>>.imgClass {
	width: 250rpx;
	height: 350rpx;
	margin: 0 auto;
}

::v-deep .uni-forms-item__error {
	top: 70%;
	z-index: 50;
}

.dialog {
	height: auto;
	position: fixed;
	width: 100%;
	z-index: 1000;
	top: 0;
	max-height: 99vh;
	overflow: auto;
}

.zhezhao {
	position: fixed;
	width: 100%;
	height: 100vh;
	z-index: 999;
	background-color: rgba(0, 0, 0, 0.5);
	top: 0;
}

.btnQ {
	width: 750rpx;
	/* height: 50rpx; */
	background-color: #fff;
	display: flex;
	justify-content: space-evenly;
	/* position: fixed;
		bottom: 0;
		z-index: 1001; */
}

.sbBox {
	width: 428rpx;
	line-height: 72rpx;
	padding: 0 10rpx 0 20rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
</style>